<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>props&emit</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { render, h, ref, watch, Fragment } = Vue
      const MyComponent = {
        props: {
          name: {
            type: String,
            default: ''
          },
          modelValue: {
            type: String,
            default: ''
          }
        },

        setup(props, ctx) {
          const clickHandle = () => {
            debugger
            ctx.emit('clicked')
          }
          const changeHandle = (event) => {
            ctx.emit('update:modelValue', event.target.value)
          }
          return () =>
            h(Fragment, [
              h('button', { onClick: () => clickHandle(), style: { color: 'red' } }, '添加'),
              h('input', { type: 'text', onChange: (e) => changeHandle(e) })
            ])
        }
      }
      const VueComponent = {
        setup() {
          const name = ref('lihh')
          const name1 = ref('')
          watch(name1, (value) => {
            console.log(value)
          })

          const modelChange = (value) => {
            name1.value = value
          }

          return () =>
            h(
              'div',
              {},
              h(MyComponent, {
                modelValue: name1,
                'onUpdate:modelValue': modelChange,
                name: name.value,
                onClicked: () => alert('111')
              })
            )
        }
      }

      render(h(VueComponent), document.getElementById('app'))
    </script>
  </body>
</html>
